<template>
  <div>

    <div class="citySlt">
      <h2 class="title">城市定位页面</h2>
      <p>热门城市</p>
      <div class="hotcities" v-for="(hotList,select) in hotList" :key="select" v-on:click="show()">    
        {{hotList}}
      </div>

    <div class="cities" v-for="(cities,key) in allCity" :key="key" ref="cities">
      <div class="letter">
        {{key}}
      </div>
  
      <div class="cities" v-for="(city, index) in cities" :key="index" v-on:click="show()">
        {{city.nm}}
      </div>
    </div>
  <div class="right">
      <div
        class="letter"
        @click="changeLetter(letter, index)"
        :class="{ red: index == num }"
        v-for="(letter, index) in letters"
        :key="index"
      >
        {{ letter }}
      </div>
  </div>

  </div>
  </div>
</template>


<script>
import axios from "axios"
export default {
  name: "CityView",
  data() {
    return {
      hotList:[],
      allCity:null,
      letters: [],
      num:0,
    };
  },

  methods: {


    show()
    {
      this.$router.push(
        {
          name:'moives',
          params:{cityname:"{hotList}"}
        }
      )
    },

    scroll(e)
    {
      let el = e.target;

      let cities = this.$refs.cities;

      for (var i =0; i <cities.length;i++){
        if(
          cities[i + 1] != undefined &&
          cities[i].offsetTop <= el.scroll &&
          el.scrollTop < cities[i + 1].offsetTop
        ){
          this.num = i;
          
          break;
        } else{
          this.num = cities.length - 1;
        }
      }
    },


    getData() {
      axios
        .get("https://apis.netstart.cn/maoyan/cities.json")
        .then((res) => {
          console.log(res);
          var newData = res.data.cts.sort(function(a,b){
            if (a.py > b.py)
            {
              return 1;
            }else{
              return -1;
            }
          });
      axios
           .get("https://apis.netstart.cn/maoyan/cities.json")
           .then((res) => {
            this.hotList = res.data.hot
            console.log(this.hotList)

           })



          let obj = {};
            newData.forEach((item) => {
              let zm = item.py.slice(0,1).toLocaleUpperCase();
              this.letters.push(zm);
              if (!obj[zm])
              {
                obj[zm] = [];

                obj[zm].push(item);
              } else {
                obj[zm].push(item);
              }
          });

          this.letters = [...new Set(this.letters)];
          this.allCity = obj;
          

        });
    },
    changeLetter(item, index) {
      console.log("参数 ==>", item, index);
      this.num = index;
      let el = this.$refs.citySlt;

      el.scrollTo({
        top: this.$refs.cities[index].offsetTop,
        behavior: "smooth",
      });
    },
  },
  computed:{},
  created(){
      this.getData();
  }
};
</script>

<style scoped lang="less">
.citySlt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  overflow-y: auto;
  z-index: 99;
  .title {
    margin: 10px 0;
    font-size: 20px;
    color: #ee0a24;
    // font-weight: 600;
    text-align: center;
  }
  .cities > div {
    cursor: pointer;
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid #cdcdcd;
  }
  .cities {
    font-size: 14px;
    .letter {
      font-weight: 550;
      font-size: 17px;
      padding: 20px 0 20px 10px;
    }
  }
  .right {
    cursor: pointer;
    position: fixed;
    right: 10px;
    top: 100px;
    .letter {
      font-size: 12px;
      padding: 5px 0;
      &.red {
        color: #ee0a24;
        font-weight: 600;
      }
    }
  }
}
</style>